<template>
    <div>
        <el-breadcrumb separator="/">
            <transition-group name="breadcrumb">
                <el-breadcrumb-item v-for="(item) in levelList"
                                    :key="item.name"
                                    :to="{ name: item.name }">
                    <span>{{ item.meta.title }}</span>
                </el-breadcrumb-item>
            </transition-group>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    data() {
        return {
            levelList: null
        };
    },
    watch: {
        $route() {
            this.getLevelList();
        }
    },
    created() {
        this.getLevelList();
    },
    methods: {
        getLevelList() {
            let matched = this.$route.matched.filter(
                item => item.meta && item.meta.title
            );
            this.levelList = matched;
        }
    }
};
</script>
